<template>
  <div id="app">
    <h1 class="title">聊天室(小明自制版)</h1>
    <div class="content-box">
      <div class="coat">
        <ul class="chat-content" id="chatListId">
          <li v-for="(item, index) in chatList" :key="index">
            <span :title="item.userName">{{ item.userName }}</span>
            <span>：</span>
            <span>{{ item.message }}</span>
          </li>
        </ul>
      </div>
      <div class="online-people">
        <h2>在线的人</h2>
        <ul class="online-list" id="onlineListId">
          <li>小明小明小明小明小明小明小明明小明小明小明小明小明小明</li>
        </ul>
      </div>
    </div>
    <div class="footer">
      <textarea
        placeholder="请输入内容，回车发送。按住Shift + 回车换行哦！"
        name="chat-box"
        id="chatInputId"
      ></textarea>
    </div>
  </div>
</template>

<script>
import WS from "./utils/websocket.js";
export default {
  data() {
    return {
      userName: "",
      chatList: [
        {
          type: 1,
          userName: "userName",
          time: "2024-10-10 10:21:30",
          message: "这是一段消息",
        },
      ],
    };
  },
  created() {
    const userName = localStorage.getItem("userName");
    if (userName) {
      this.userName = userName;
    } else {
      this.initUserName();
    }
    alert("你好，" + this.userName);
  },
  mounted() {
    WS.initWebSocket();
    window.addEventListener("onmessageWS", this.getSocketData);
    window.onbeforeunload = function () {
      WS.close();
    };
  },
  methods: {
    initUserName() {
      this.userName = prompt("请输入你的名字：");
      do {
        if (this.userName !== null && this.userName.trim() !== "") {
          console.log("已获取到名字");
          localStorage.setItem("userName", this.userName);
        } else {
          this.userName = prompt("请输入你的名字哦：");
        }
      } while (this.userName === null || this.userName.trim() === "");
    },
    getSocketData(res) {
      console.log("res", res);
    },
  },
};
</script>

<style lang="less">
html,
body,
#app {
  height: 100%;
  width: 100%;
  margin: 0;
  padding: 0;
  overflow: hidden;
}

.title {
  text-align: center;
  padding-bottom: 1vh;
}

.content-box {
  display: flex;
  justify-content: space-evenly;
  height: 60%;
  margin: 30px;
}

.coat {
  flex-shrink: 0;
  width: 60%;
  box-sizing: border-box;
  padding: 3%;
  box-shadow: 7px 8px 20px rgba(0, 0, 0, 0.3);
  overflow: hidden;
}

.online-people {
  flex-shrink: 0;
  width: 20%;
  box-shadow: 7px 8px 20px rgba(0, 0, 0, 0.3);
  display: flex;
  flex-direction: column;
  box-sizing: border-box;
  padding-bottom: 20px;
  overflow: hidden;
  user-select: none;
}

.online-people h2 {
  flex-shrink: 0;
  text-align: center;
}

.online-people .online-list {
  flex-grow: 1;
  flex-shrink: 0;
  margin: 0;
  padding: 0;
  overflow: auto;
  height: 0;
}

.online-people .online-list::-webkit-scrollbar {
  width: 5px;
}

.online-people .online-list::-webkit-scrollbar-track {
  background-color: #f0f0f0;
  border-radius: 25px;
}

.online-people .online-list::-webkit-scrollbar-thumb {
  background: #4e4e4e;
  border-radius: 25px;
}

.online-people .online-list li {
  box-sizing: border-box;
  padding: 0 5%;
  margin: 5% 0;
  text-align: center;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.chat-content {
  width: 100%;
  height: 100%;
  overflow: auto;
  padding: 0;
  margin: 0;
}

.chat-content::-webkit-scrollbar {
  width: 5px;
}

.chat-content::-webkit-scrollbar-track {
  background-color: #f0f0f0;
  border-radius: 25px;
}

.chat-content::-webkit-scrollbar-thumb {
  background: #4e4e4e;
  border-radius: 25px;
}

.chat-content li {
  margin: 0;
  margin-bottom: 10px;
  display: flex;
}

.chat-content li span:first-child {
  max-width: 150px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  font-weight: bold;
  font-size: 18px;
}

.footer {
  width: 80%;
  margin: 0 auto;
}

textarea {
  width: 100%;
  height: 150px;
  resize: none;
}
.system-info span {
  font-size: 12px;
  color: #000;
  text-align: center;
}
</style>
